<template>
    <div class="btnContainerBox">
        <template v-for="(btn, index) of buttons">
            <!-- 当按钮的数量小于最大数时，或者显示最后一个按钮 -->
            <template v-if="index <= buttonCount - 1 ">
                <div
                    :class="{ 'bpm-task-button': true, }"
                    :key="btn.btnId"
                    @click="handMethod(btn)"
                >
                    <my-icon type="loading" v-if="getLoading(btn)" />
                    <custom-button-style :btn="btn" :customBtnConfig="customBtnConfig"></custom-button-style>
                </div>
            </template>
        </template>
        <a-dropdown v-if="buttons.length>buttonCount">
            <a class="ant-dropdown-link" @click.prevent> 更多<DownOutlined /> </a>
            <template #overlay>
                <a-menu>
                    <template v-for="(innerBtn, index) of buttons">
                        <a-menu-item v-if="index > buttonCount - 1 ">
                            <div :key="innerBtn.id" @click="handMethod(innerBtn)">
                                <custom-button-style :btn="innerBtn" :customBtnConfig="customBtnConfig"></custom-button-style>
                            </div>
                        </a-menu-item>
                    </template>
                </a-menu>
            </template>
        </a-dropdown>
    </div>
</template>

<script>
import useMain from "@/stores/useMain.js";
import {mapState} from 'pinia';
import customButtonStyle from "./customButtonStyle.vue"

export default {
    name: 'CustomToolBar',
    components: {
        customButtonStyle
    },
    props: {
        customBtnConfig: { type: Object },
    },
    computed: {
        //显示按钮数量
        buttonCount() {
            return 2;
        },
        ...mapState(useMain, ['navigations', 'navigation', 'appKey', 'curApp','menus','haveHomePage']),
    },
    data() {
        return {
            buttons: [],
            config:{},
            defaultBtns:['custBtnMoreBtn','custBtnRefreshBtn']
        }
    },
    created() {
        this.config =this.customBtnConfig;
        this.init();
    },
    methods: {
        getI18Name(item,text){
            let name = this.$i18(item.i18nJson,'名称解析');
            name=name?name:item[text];
            return name;
        },
        init(){
            let customBtnJson = JSON.parse(this.config.customBtnJson);
            this.buttons=customBtnJson.btnConfig;
        },
        changeConfig(activeObj){
            this.buttons=[];
            this.config =activeObj;
            this.init();
        },
        handMethod(btn){
            //默认按钮
            if(btn.isDefault || this.defaultBtns.includes(btn.btnClick)){
                this[btn.btnClick](btn);
                return;
            }

            //调用预定义方法。
            this.$emit("handleCustomFun",btn);
        },
        //刷新
        custBtnRefreshBtn(){
            this.$emit("refreshChange");
        },
        //跳转
        custBtnMoreBtn(btn){

            if(!btn.btnPreCond || !btn.btnPreCond.mode|| !btn.btnPreCond.component ){
                return;
            }
            if("url" ==btn.btnPreCond.mode){
                //跳转到外部url
                window.open(btn.btnPreCond.component, '_blank');
                return;
            }else if("vue" ==btn.btnPreCond.mode){
                //跳转到自定义vue页面
                var action = "viemvue";
                let appId = this.curApp.appId;
                let viemUrl = btn.btnPreCond.component;
                let query={
                    appId:appId,
                    appKey:this.appKey,
                    action:action,
                    viemUrl:viemUrl
                };
                let obj=this.$router.resolve({
                    name:'openCustomDoc',
                    params:{
                        appId:appId,
                        appKey:this.appKey,
                        action:action,
                        viemUrl:viemUrl
                    },
                    query:query
                });
                window.open(obj.href,"_blank" );
                return;
            }
            //跳转到指定路由
            let obj = {
                collapsed:true,
                key:btn.btnPreCond.component,
                title:this.$i18(btn.btnPreCond.name,'菜单名称'),
                showType:'URL',
            }
            //888888888888888888
        },
        getLoading(btn) {
            if (!btn.hasOwnProperty('loading')) {
                return false
            }
            return this[btn.loading]
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'bpmInst', key)
        },
    },

}
</script>

<style scoped>
.btnContainerBox {
    display: flex;
    align-items: center;
}
.bpm-task-button {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    cursor: pointer;
}
.bpm-task-button:hover {
    color: #4285f4;
}
.bpm-task-button.bpm-task-button-primary {
    background-color: #4285f4;
    color: #fff;
    border-radius: 4px;
}
.ant-dropdown-link {
    padding: 0 12px;
}

.spinContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-top: 40px;
    text-align: center;
}
.spinCenter {
    text-align: left;
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    box-shadow: 0px 0px 5px #ddd;
    top: 40%;
}
</style>
